<template>
  <div ref="wrapEl">
    <AdTable @register="registerTable">
      <template #toolbar>
        <Authority :value="'Admin.Brand.Suggest.Create'">
          <a-button type="primary" @click="handleCreate">
            <Icon icon="ant-design:plus-circle-outlined" />新增
          </a-button>
          <a-button type="default" @click="handleExport">
            <Icon icon="ant-design:vertical-align-bottom-outlined" />导出
          </a-button>
        </Authority>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction :stop-button-propagation="true" :actions="[]" />
        </template>
      </template>
    </AdTable>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { Authority } from '@/components/Authority';
  import { AdTable, useAdTable, TableAction } from '@/components/AdTable';
  import { useLoading } from '@/components/Loading';
  import { useMessage } from '@/hooks/web/useMessage';
  import { FormModeEnum } from '@/enums/formEnum';
  import { AjaxResultTypeEnum } from '@/enums/ajaxResultTypeEnum';
  import { ImageSelector } from '@/components/ImageSelector';
  import Icon from '@/components/Icon/Icon.vue';
  import { FilterGroup } from '@/utils/common/types';
  import { jsonToSheetXlsx } from '@/components/Excel/src/Export2Excel';
  import { columns } from './suggest.data';
  import { Read, Create, Export } from './suggest.api';
  import { json } from 'stream/consumers';

  export default defineComponent({
    name: 'SuggestPage',
    components: {
      Authority,
      AdTable,
      TableAction,
      Icon,
      ImageSelector,
    },
    setup() {
      const { createConfirm, createMessage } = useMessage();
      const wrapEl = ref<ElRef>(null);
      const [openWrapLoading, closeWrapLoading] = useLoading({
        target: wrapEl,
        props: {
          tip: '加载中...',
          absolute: true,
        },
      });

      const [registerTable, { openDetailForm, reload, getForm }] = useAdTable({
        // 表标题呈现器
        title: '反馈列表',
        // 表格数据接口请求对象
        api: Read,
        // 详情表单抬头
        detailForm: {
          // 表单标识
          formIndex: 'brand_suggest_detail',
          // 主键字段
          keyField: 'Id',
          title: '反馈详情',
          createApi: Create,
        },
        // 表单列信息 BasicColumn[]
        columns,
        // 是否可拖拽列
        canColDrag: true,
        // 使用搜索表单
        useSearchForm: true,
        // 显示表格设置工具
        showTableSetting: true,
        //表格设置项
        tableSetting: { redo: true, size: true, setting: true, fullScreen: true },
        // 是否显示表格边框
        bordered: false,
        // 是否显示序号列
        showIndexColumn: true,
        // 表格右侧操作列配置 BasicColumn
        actionColumn: {
          width: 125,
          title: '操作',
          dataIndex: 'action',
          fixed: 'right',
        },
      });

      async function handleCreate() {
        openDetailForm(FormModeEnum.Add);
      }

      async function handleExport() {
        createConfirm({
          title: '导出',
          iconType: 'warning',
          content: '是否要导出数据?',
          async onOk() {
            const group: FilterGroup = getForm().getSearchInfo();
            const result = await Export(group);
            if (result.Type == AjaxResultTypeEnum.Success) {
              jsonToSheetXlsx({
                data: result.Data,
                filename: '用户反馈.xlsx',
              });
            }
            createMessage.success('导出成功。');
          },
        });
      }

      return {
        wrapEl,
        registerTable,
        handleCreate,
        handleExport,
      };
    },
  });
</script>
